import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { getSearchhot,getBookname} from './../../utils/api';
import creatHistory from 'history/createHashHistory' 
@inject('store')
@observer
class search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            recommend: [],
            display: "node",
            history: [],
        }
   }
  componentDidMount () {
      let { getSearch, getSearchHot } = this.props.store.search
      if (localStorage.getItem('history')) {
          let arr =  this.state.history
          arr = JSON.parse(localStorage.getItem('history')) 
          arr= Array.from(new Set(arr))
          this.setState({
              history:arr
          })
      } 
    this.Hot()
    getSearch(this.Search("")) 
    }
    Hot(x) {
        x= x || ''
    let {  getSearchHot } = this.props.store.search
       /* 热门推荐 */
      getSearchhot(x).then(data => {
        let arr = []
        data.data.map((item) => {
            arr.push(item.title)
        })
      getSearchHot(arr) 
})
   }
    
   
    changeSearch(e) {
        let value = e.target.value
        
        if(value.length===0) return this.refs.input.style.display = 'none'
        this.Search(value).then(res => {
            if (res.length !== 0) {
                this.refs.input.style.display = 'block'
                this.setState({
                    recommend:res
                })
            } else {
                this.refs.input.style.display = 'none'
                this.setState({
                    recommend:[]
                })
            }
        })
    }
   /* 搜索请求抽离 */
    Search(text) {
      return new Promise(result=> {
            getBookname(text).then(res => { 
               result(res.data.data)  
            })
        })
    }
    render() {
        const history =creatHistory()
        // let { bannerlist, prolist } = this.props
        let { searchlist, searchhot } = this.props.store.search
        return (
            < div className = "search"  style={{position:"relative"}}>
            {/* 头部 */ }
            < header className = 'bg-red h-4 text-white w-100 flex justify-center align-center px-2' >
                <i className='iconfont icon-back ' onClick={() => {
                        history.goBack()
                    }}>返回</i> < i className = 'font-smaller flex-1 text-center' > 搜索</i > <i className='iconfont icon-shujia font-small'></i> <i className='iconfont icon-index ml-1 '></i>
                </header >
            {/* 搜索 */ }
              < div className = 'w-100 flex align-center px-1 my-2' >
                  <div className='flex flex-1  align-center rounded-circle bg-hover-light' >
                        <i className='iconfont iconsousuo px-1'></i>
                        <input className='flex-1 font-xiao' type="text" placeholder='请输入搜索内容' style={{ height: ".38rem", background: 'none', border: 'none' }} onInput={this.changeSearch.bind(this)} ref='text'/>
                </div>
                    <div className='pl-1' onClick={() => {
                        let title = this.refs.text.value
                        if (title) {
                            this.props.history.push({
                                pathname: '/nofooter/searchDetail', state: { name: this.refs.text.value }
                            });
                            let arr = this.state.history
                            arr.push(title)
                            this.setState({
                               history:arr 
                            })
                            localStorage.setItem('history', JSON.stringify(arr))
                        }
                        
                  }}>
                        确定
                   </div>
                </div >
                {/* 定位 搜索时弹出的推荐 */}
                <div style={{ display:"none", position: "absolute", top: '1rem', background: "#fff",zIndex:"9999",minHeight: '4rem',maxHeight:'5rem' ,overflow:'hidden'}} ref='input'>
                    <ul style={{ }}>
                    {this.state.recommend.map((item, index) => {
                        return <li key={index} className='flex align-center px-2 py-1' style={{ width: "3.8rem", }} onClick={() => {
                            this.props.history.push({
                                pathname: '/nofooter/searchDetail', state: { name: item.title}
                            });
                            let arr =this.state.history
                            arr.push(item.title)
                            this.setState({
                               history:arr 
                            })
                            localStorage.setItem('history', JSON.stringify(arr))
                        }}>
                            <i className='iconfont icon-dlsz'></i>
                            <i className='font-smaller flex-1 pl-1'>{item.title}</i>
                        </li>
                    })}
                    </ul>
                </div>
            {/* 热门推荐 */ }
                < div >
                    <div className='flex'><h2 className='px-1 flex-1 align-center'>热门推荐</h2>
                        <i className="font-xiao px-2 flex align-center" onClick={() => {
                            this.Hot(666)
                           }}>换一批<a className="iconfont icon-refresh"></a></i></div>
            <div className="flex flex-wrap ">
                {searchhot.map((item, index) => {
                    return (
                        <div className="border rounded-circle font-xiao  mx-1  bg-hover-light text-secondary" onClick={() => {
                            this.props.history.push({
                                pathname: '/nofooter/searchDetail', state: { name: item }
                            });  let arr =this.state.history
                            arr.push(item)
                            this.setState({
                               history:arr 
                            })
                            localStorage.setItem('history', JSON.stringify(arr))
                        }} key={index} style={{padding:'.05rem .1rem',marginTop:'0.05rem'}}>
                            { item }
                        </div>
                    )
                })}
            </div>
            </div >
            {/* 搜索历史 只保留本地存储 因为就算不等录也有搜索历史,历史根据设备端变化*/ }
            < div  className='py-2'>
                    <div className='flex'><h2 className='px-1 flex-1 align-center'>搜索历史</h2><i className="font-xiao px-2 flex align-center" onClick={() => {
                        localStorage.setItem('history', JSON.stringify([]))
                        this.setState({
                            history:[]
                        })
                   }}>删除历史<a className="iconfont icon-laji font-xiao"></a></i></div>
            <div className="flex flex-wrap ">
                {this.state.history.map((item, index) => {
                    return (
                        <div className="border rounded-circle font-xiao  mx-1  bg-hover-light text-secondary" onClick={() => {
                            this.props.history.push({
                                pathname: '/nofooter/searchDetail', state: { name: item }
                            })
                        }} key={index} style={{padding:'.05rem .1rem',marginTop:'0.05rem'}}>
                            { item }
                        </div>
                    )
                })}
            </div>
            </div >
      </div >
    )
  }
}

export default search